@import"./com";

header{
    .h_top{
        width: vw(750);
        height: vw(150);

        display: flex;
        justify-content: space-around;
        align-items: center;
        >img{
            width: vw(125);
        }

        >.inp{
            position: relative;
            width: vw(270);
            height: vw(52);
            border: vw(1) solid #ff9344;
            border-radius: vw(26);
            box-sizing: border-box;
            // 搜索框
            &::after{
                content: "";
                position: absolute;
                right: vw(16);
                top: vw(8);
                width: vw(36);
                height: vw(34);
                background-color: #f2121f;
                background: url(../images/index/搜索矩.png) no-repeat top/cover;
            }
            > input {
                width: vw(183);
                height: vw(34);
                line-height: vw(34);
                font-size: vw(24);
                margin-top: vw(10);
                margin-left: vw(27);
                border: none;
                outline: none;
            }
        }
        // 地区
        .sel {
            position: relative;
            > select {
                width: vw(160);
                height: vw(60);
                border: vw(1) solid #ff9344;
                box-sizing: border-box;
                border-radius: vw(5);
                font-size: vw(26);
                text-indent: vw(17);
                // 去除三角形
                appearance: none;
                outline: none;
            }
            >i{
                content: "";
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: vw(-10);
                margin-right: vw(16);
                width: 0;
                height: 0;
                border: vw(20) solid transparent;
                border-top: vw(20) solid #ff9344;
                // 穿透
                pointer-events: none;
            }
        }
        
    }   
    // 首页轮播图
    .h_bt{
        position: relative;
        width: vw(750);
        overflow: auto;
        >ul{
            width: vw(750 * 3);
            font-size: 0;
            >li{
                display: inline-block;
                white-space: nowrap;
                width: vw(750);
                height: vw(287);
                >img{
                    width: 100%;
                }
            }
        }
        // 进度条
        .bar{
            position: absolute;
            top: vw(286);
            width: 100%;
            height: vw(10);
            background-color: rgba(0,0,0,.5);

            >div{
                position: absolute;
                left: vw(150);
                width: vw(130);
                height: vw(10);
                background-color: rgba(255,255,255,.5);
            }
        }
    }
}

main{
    height: vw(1200);
    // 优惠团购
    .m_gp{
        width: vw(750);
        display: flex;
        justify-content: space-between;
       margin-top: vw(35);
        
        >div:first-of-type{
            margin-left: vw(22);
            
            
            >img{
                width: vw(57);
                height: vw(57);
                vertical-align: middle;
            }
            >p{
                display: inline;
                font-size: vw(29);
                font-weight:bolder;
                vertical-align: middle;
                margin-left: vw(9);
            }
        }

        >div:last-of-type{
            padding-right: vw(22);
            
            >a{
                font-size: vw(24);
                font-weight: bold;
            }
            >img{
                width: vw(27);
                height: vw(27);
                vertical-align: middle;
            }
        }
    }
    // 优惠团购图片链接
    .m_gp1{
        width: vw(750);
        height: vw(270);
        // box-sizing:content-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        
        >div >a >img {
            width: vw(240);
            height: vw(95);
        }
        >div:first-of-type,
        div:last-of-type{
            display: flex;
            justify-content: space-around;
        }
        
    }
    // 猜你喜欢
    .m_hob{
        width: vw(750);
        display: flex;
        justify-content: space-between;
       margin-top: vw(35);
        
        >div:first-of-type{
            margin-left: vw(22);
            
            
            >img{
                width: vw(57);
                height: vw(49);
                vertical-align: middle;
            }
            >p{
                display: inline;
                font-size: vw(29);
                font-weight:bolder;
                vertical-align: middle;
                margin-left: vw(9);
            }
        }

        >div:last-of-type{
            padding-right: vw(22);
            
            >a{
                // display: inline;
                font-size: vw(24);
                font-weight: bold;
            }
            >img{
                width: vw(27);
                height: vw(27);
                vertical-align: middle;
            }
        }
    }
    // 猜你喜欢-店铺信息
    .m_hob1{
        
        margin-top: vw(40);
        width: vw(750);
        display: flex;
        // 店铺信息一
        >a > img{
            vertical-align: middle;
            width: vw(210);
            height: vw(165);
        }
        
        .hob1_a{
            margin-left: vw(21);
            margin-right: vw(17);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            >div:first-of-type{
                width: vw(500);
                display: flex;
                justify-content: space-between;
                a{
                    font-size: vw(29);
                    font-weight: 550;
                }

                >span{
                    margin-right: vw(17);
                    font-size: vw(17);
                }
            }

            >div:nth-of-type(2){
                >span{
                    font-size: vw(22);
                }
            }

            >div:last-of-type{
                width: vw(500);
                display: flex;
                justify-content: space-between;
                >span:first-of-type{
                    font-size: vw(25);
                    color: #ff9344;
                }
                >span:last-of-type{
                    font-size: vw(17);
                    margin-right: vw(14);
                }
            }
            
                
            

        }
        
    }
}

nav{
    position: fixed;
    bottom: 0;
    background-color: #fff;
    .f_nav{
       

        width: vw(750);
        display: flex;
        justify-content: space-around;
        > div{
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            > a{
                font-size: vw(24);
                text-align: center;
                img{
                    width: vw(73);
                    height: vw(73);
                }
            }
        }
    }

    
}